<template>
  <div class="container">
    <!-- 公示信息操作记录弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      :show-close="true"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div class="dialogContent">
        <div class="secondLevelTitleStyle" style="margin-top: 0">
          您所添加的人员存在以下不良记录：
        </div>

        <el-table
          :data="badList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="companyName"
            label="发生单位"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                v-if="scope.row.projectId"
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
              <copyText
                v-else
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="occurrenceDate"
            label="发生时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="详细记录"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.description"
                :columnName="'description'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="badList.length < 1">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <div class="secondLevelTitleStyle">
          您所添加的人员存在以下奖励信息：
        </div>
        <el-table
          :data="goodList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="companyName"
            label="发生单位"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                v-if="scope.row.projectId"
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
              <copyText
                v-else
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="occurrenceDate"
            label="发生时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="奖励说明"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.description"
                :columnName="'description'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="goodList.length < 1">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="save" @click="affirm"
          >已知晓</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'rewardsReminder',
  props: ['employeeCreditList'],
  data() {
    return {
      formVisible: true,
      goodList: [],
      badList: [],
    }
  },

  created() {
    this.employeeCreditList.forEach((item) => {
      if (item.type == 'GOOD') {
        this.goodList.push(item)
      } else {
        this.badList.push(item)
      }
    })
  },
  mounted() {},
  methods: {
    affirm() {
      this.formVisible = false
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    padding-left: 24px;
    padding-right: 24px;
    height: calc(100% - 67px);
    color: #333;
    font-size: 14px;
  }
}

.dialog-footer {
  text-align: center;
}
</style>
